<template>
  <div style="border-top: 10px solid #eef0ef;border-bottom: 10px solid #eef0ef;padding:0 10px;">
    <el-date-picker
      v-model="value1"
      style="margin: 10px 10px 0px 0;width:260px;"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="changeTime"
    />
    <ul class="tqfxbox">
      <li>
        <div class="title">累计积雨分析</div>
        <div class="right-view">
          <div class="item-icon">
            <img src="@/assets/weather/jyfx.png">
          </div>
          <div class="item-text">
            <div class="mmtext">{{ accData.accPrecip }}<span>mm</span></div>
            <div v-if="accData.accPrecipNext>=0" class="nntext">
              比去年同期高 {{ accData.accPrecipNext }} <span>mm</span>
              <el-icon color="#FD4627"><Top /></el-icon>
            </div>
            <div v-else class="nntext">
              比去年同期低 {{ accData.accPrecipNext }} <span>mm</span>
              <el-icon color="#00AF70"><Bottom /></el-icon>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="title">有效积温分析</div>
        <div class="right-view">
          <div class="item-icon">
            <img src="@/assets/weather/jwfx.png">
          </div>
          <div class="item-text">
            <div class="mmtext">{{ accData.accTemp }}<span>°C</span></div>
            <div v-if=" accData.accTempNext>=0" class="nntext">
              比去年同期高 {{ accData.accTempNext }}  <span>°C</span>
              <el-icon color="#FD4627"><Top /></el-icon>
            </div>
            <div v-else class="nntext">
              比去年同期低 {{ accData.accTempNext }} <span>°C</span>
              <el-icon color="#00AF70"><Bottom /></el-icon>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { getFarmlandAcc } from '@/api/plant'
const userStore = useUserStore()
const accData = ref({
  accPrecip: 0,
  accTemp: 0
})

const value1 = ref('')
const init = (data) => {
  getFarmlandAcc({ farmId: userStore.userInfo.farmId, ...data }).then(res => {
    if (res.code === 0) {
      if (res.data.length === 1) {
        accData.value = {
          accPrecip: res.data[0].accPrecip,
          accPrecipNext: 0,
          accTemp: res.data[0].accTemp,
          accTempNext: 0
        }
      } else if (res.data.length === 2) {
        accData.value = {
          accPrecip: res.data[0].accPrecip,
          accPrecipNext: Number(Number(res.data[0].accPrecip - res.data[1].accPrecip).toFixed(2)),
          accTemp: res.data[0].accTemp,
          accTempNext: Number(Number(res.data[0].accTemp - res.data[1].accTemp).toFixed(2))
        }
      }
    } else {
      accData.value = {
        accPrecip: '--',
        accPrecipNext: 0,
        accTemp: '--',
        accTempNext: 0
      }
    }
  })
}
onMounted(() => {
  init()
})
const changeTime = (data) => {
  if (data) {
    init({
      startTime: data[0],
      endTime: data[1]
    })
  } else {
    init()
  }
}
</script>
<style lang="scss" scoped>
.tqfxbox{
    display: flex;
    margin: 10px 0;
    padding:5px 0;
    background-color: #f7f7f7;
    position: relative;
    border:1px solid #ededed;
    li{
        position: relative;
        z-index: 10;
        flex: 1;
        text-align: center;
        line-height: 24px;
        display:flex;
        align-items:center;
        &+li::after{
            content: "";
            height:40px;
            width:1px;
            position: absolute;
            background-color:#d9d9d9;
        }
        .right-view{
            padding:10px 20px;
            display:flex;
            align-items: center;
            .item-icon{
                font-size:34px;
                margin-right: 25px;
                img{
                  height:60px;
                  width:60px;
                }
            }
            .item-text{
                text-align:left;
                .mmtext{
                    font-size:20px;
                    font-weight:bold;
                    color:#101010;
                }
                .nntext{
                    font-size:14px;
                    color:#666;
                    padding-top:6px;
                    display: flex;
                    align-items: center;
                }
            }
        }
        .item{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;

            b{
                color: #333;
                font-size: 14px;
                padding: 0 4px 0 5px;

            }
            span{
                color: #999;
                padding: 0 4px 0 0;
            }
            &.item2{
                color: #333;
            }
        }
        .title{
          color:#333;
          font-size: 14px;
          font-weight:bold;
          padding:0 20px;
          position:relative;
        }
        .title::after{
          content: "";
          height: 3px;
          width: 50px;
          position: absolute;
          left: 20px;
          bottom: 0;
          background: linear-gradient(to right,#04AE70,#adefd6);
        }
    }
}
</style>
